<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>HTML5页面直接调用百度地图API,获取当前位置，直接导航目的地</title>
<script type="text/javascript" src="../../libs/vue.js"></script>
	<script type="text/javascript" src="../../js/app/url.js"></script>
		<script type="text/javascript" src="../../libs/hui.js"></script>
		<script type="text/javascript" src="../../js/s_plus.js"></script>
		<script type="text/javascript" src="../../js/md5.js"></script>
		<script type="text/javascript" src="../../js/app/api.js"></script>
		
<link rel="stylesheet" href="../../css/hui.css" />
<link rel="stylesheet" href="../../css/s_plus.css" />
<link rel="stylesheet" href="../../css/base.css" />
<link rel="stylesheet" href="../../css/layout.css" />
<link rel="stylesheet" href="../../css/choice.css" />
  <style type="text/css">

        /*body, html,#allmap {width: 100%;height: 95%;overflow: hidden;margin:0;font-family:"微软雅黑";}*/
			
    </style> 
    <script src="http://api.map.baidu.com/api?v=2.0&ak=a82yNQICnHARgGpKuPH1wWZWQcBD2Llo"></script>  

</head>

<body>  
<header class="f_l maxbox subhead">
  <a class="back" href="" @click="back"><i class="iconfont">&#xe605;</i></a>
  <h1>导航</h1>
</header>
   <!--<p id="allmap"></p>-->
<section class="f_l maxbox map">
						<!--<div class="f_l searchbar">
          <input class="search_key" name="" type="text" placeholder="请输入关键字">
          <button class="search_btn" name=""><i class="iconfont">&#xe63e;</i></button>
        </div>-->
						<!--<img src="../../images/map.jpg">-->

<iframe id="main" width="100%" height="100%"   frameborder=0 src=""></iframe>

				</section>
					
											<div id="allmap" style="display: none;"></div>

</body>  

</html>  


<script type="text/javascript" src="../../js/jquery.1.9.1.min.js"></script>


<script>  
	var head = $(".subhead").height();
			var foot = $(".work_list").height();
			var pageHeight = $(document).height();
			var mapHeight = pageHeight - (head);
			$(".map").height(mapHeight);
	
	
	

	
	
//document.write('<script type='text/javascript' src='http://api.map.baidu.com/getscript?v=2.0&ak=a82yNQICnHARgGpKuPH1wWZWQcBD2Llo&services=&t=20181029172410'><"/"script>");
		 var sp = new Vue({
	 	el:".subhead",
	 	methods:{
	 		back:function(){
	 			hui.back();
	 		}
	 	}
	 	
	 	});


    
	
//	$(function(){
	
	
		var map = new BMap.Map("allmap");  
	
	    var point = new BMap.Point(116.709684,39.89778);
	
	    map.centerAndZoom(point, 16);  
	
	    map.enableScrollWheelZoom(); 
	
	    var myIcon = new BMap.Icon("myicon.png",new BMap.Size(30,30),{
	
	        anchor: new BMap.Size(10,10)    
	
	    });
	
	    var marker=new BMap.Marker(point,{icon: myIcon});  
	
	    map.addOverlay(marker);  
	
		hui.loading("地图加载中...");
	    var geolocation = new BMap.Geolocation();
	
	    geolocation.getCurrentPosition(function(r){
	
	        if(this.getStatus() == BMAP_STATUS_SUCCESS){
	
	
	            var mk = new BMap.Marker(r.point);
	
	            map.addOverlay(mk);
	
	            //map.panTo(r.point);//地图中心点移到当前位置
	
	            var latCurrent = r.point.lat;
	
	            var lngCurrent = r.point.lng;
	
	            //alert("我的位置：'+ latCurrent + ',' + lngCurrent);
	
		var lat = localStorage.getItem("lat");
			var lng = localStorage.getItem("lng");
			console.log(lat);
			console.log(lng);
	     var param =lat+","+lng ;
	          console.log("param--------------"+param);
	
		var url = "http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination="+param+"&mode=driving&region=beijing&output=html";


		
	     console.log(url);
	     
	   
	 $("#main").attr("src",url);
	 
	 hui.closeLoading();
//	            location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination="+param+"&mode=driving&region=北京&output=html";
	            
	            
	
	        }
	
	        else {
	
	            alert('failed'+this.getStatus());
	
	        }        

    },{enableHighAccuracy: true})
    
//	});
	 	

   

</script>